<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../src/angular-table-resize.css">
    <script src="angular.min.js"></script>
    <script src="jquery.js"></script>
    <script src="../src/angular-table-resize.js"></script>

    <script src="controller.js"></script>

    <title>Table Resize Demo</title>
    <style>
        .table-container {
            position: relative;
            margin: 20px auto;
            /*width: 500px;*/
            /*height: 80px;*/
            padding: 10px;
            border: 1px solid;
            overflow: auto;
        }

        table {
            /*width: 600px;*/
            /*margin-top: 50px;*/
            /*margin-left: 100px;*/
        }

        table, th, td {
            border: 1px solid;
            border-collapse: collapse;
            text-align: center;
            overflow: hidden;
        }

        table.fixed-table {
            table-layout: fixed;
        }
    </style>
</head>
<body>
<div ng-controller="myCtrl">
    <div>
        <table ntr ntr-scope="{{sc}}" ntr-column-resize ntr-remember
               class="fixed-table" style="width: 600px">
            <thead>
<!--            <tr>-->
<!--                <th colspan="2">colspan</th>-->
<!--                <th colspan="2">colspan</th>-->
<!--            </tr>-->
            <tr>
                <th width="80px">序号</th>
                <th width="">汽车厂商</th>
                <th width="30%">主要品牌</th>
                <th width="80px">产地</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="car in cars">
                <td>{{$index}}</td>
                <td>{{car.manufacture}}</td>
                <td>{{car.brand}}</td>
                <td>{{car.producing}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <hr>
    <div>
        <table ntr ntr-scope="{{sc}}" ntr-column-resize class="fixed-table">
            <thead>
            <!--            <tr>-->
            <!--                <th colspan="2">colspan</th>-->
            <!--                <th colspan="2">colspan</th>-->
            <!--            </tr>-->
            <tr>
                <th width="80px">序号</th>
                <th width="20%">汽车厂商</th>
                <th width="30%">主要品牌</th>
                <th width="80px">产地</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="car in cars">
                <td>{{$index}}</td>
                <td>{{car.manufacture}}</td>
                <td>{{car.brand}}</td>
                <td>{{car.producing}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script>
    var bodyWidth = $("body").width(undefined);
    console.log("body width is", bodyWidth);
</script>
</body>
</html>